<template>
	<div>
		<div class="note" :style ="note">
		</div>
		<div class="list"> 
			<div class="box">
				<div class="pic">
					<img :src="MyBirthday.photo" alt="">
				</div>
				<div class="info">
					<div class="step1">
						<span>{{MyBirthday.name}}</span>
						<p>{{MyBirthday.org_name}}</p>
					</div>
					<div class="step2">
						<span>{{year}}年{{month}}月{{day}}日入党</span>
						<span>距您的入党纪念日还有{{MyBirthday.apart_day}}天</span>
					</div>
					<div class="step3" @click="xs">
						<span>分享求祝福</span>
					</div>
				</div>
				<div class="blessing">
					<div class="title">
						<div class="tix">
							<span>祝福墙</span>
							<span class="num">({{count}})</span>
						</div>
						<div class="xian"></div>
					</div>
					<div v-if="list.length>0">
						<div class="bar" v-for="(item,index) in list" :key="index">
							<div class="col1">
								<div class="tx">
									<img :src=item.head_photo||defaultAvatar alt="">
								</div>
								<div class="xx">
									<span>{{item.name}}</span>
									<p>{{item.org_name}}</p>
								</div>
							</div>
							<div class="col2">
								<p>
									{{item.content}}
								</p>
							</div>
							<div class="col3">
								<div class="bq">
									<span>{{item.photo_name}}</span>
								</div>
							</div>
							<div class="col4">
								<span>{{item.create_time | time}}</span>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="mebs" v-if="flag">
			<img src="@as/img/shengri_zhiying@2x.png" alt="">
			<span class="dian">点击右上角分享</span>
			<div @click="nxs">
				<span>知道了</span>
			</div>
		</div>
	</div>
</template> 

<script>
	import wx from "weixin-js-sdk";
	export default {
			data() {
				return {
					flag:false,
					year:'',
					month:'',
					day:'',
                    count:0,
					JNday:'',
                    list:[],
                    defaultAvatar:'https://media.71ydj.com/FvSE_SRijRPJ-Qkti8sHfYr1W9zH#',
					MyBirthday:{},
					note: {
						backgroundImage: "url(" + require("@as/img/shengri_xixi@2x.png") + ")",
						backgroundRepeat: "no-repeat",
						backgroundSize: "100%",
					}
				}
			},
			mounted() {
				this.$progress.done();
			},
			methods: {
				xs:function(){
					this.flag = true;
				},
				nxs:function(){
					this.flag = false;
				},
				async getMyBirthday () {  
					let that = this;
					try {
						let params = {
							org_id:JSON.parse(window.Cookies.get("user_71ydj")).organization_id,
							uid: JSON.parse(window.Cookies.get("user_71ydj")).id,
						}
						const url = `/app/Organization/self_birthday`
						let res = await that.$http.get(url, params)
						console.log(res)
						that.$progress.done()
						if (res.code === 200) {
						    this.count =res.data.count;
							that.MyBirthday = res.data.info;
							that.list =res.data.list;
							let date = new Date((res.data.info.party_time)*1000);
							that.year = date.getFullYear();
							that.month = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
							that.day = date.getDate();
							let daying = Math.round(new Date() / 1000);//当前时间的时间戳
							let utc= daying - (res.data.info.party_time);
							that.JNday = parseInt(utc/(24*60*60*1000));
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
				// 分享 https://bulid.71ydj.com/Share.php
				async Sdk () {  
					// debugger
					let that = this;
					try {
						const url = `Share.php`
						let res = await that.$http.get(url)
						console.log(res)
						that.$progress.done()
						if(res.status==200){
							that.wxConfig = {
								debug: false,
								appId: res.data.appId,
								nonceStr: res.data.nonceStr,
								signature: res.data.signature,
								timestamp: res.data.timestamp,
								jsApiList: ['updateTimelineShareData','updateAppMessageShareData']
							};
							that.fenxiang();
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
				fenxiang: function() {
					let that = this;
					wx.config(that.wxConfig);
					wx.ready(() => {
						//分享到朋友圈
						wx.updateTimelineShareData({ 
							title: "送祝福",
							desc: "送祝福",
							link: "",
							imgUrl:"",
							success: function(res) {
							
							},
						});
						//分享给朋友
						wx.updateAppMessageShareData({
						title: "送祝福",
							desc: "送祝福",
							link: "",
							imgUrl:"",
							success: function(res) {
								
							},
						
						});
					});
				}
			},
			created(){
				this.getMyBirthday();
				this.Sdk()
			}
	}
</script>


<style scoped lang="scss">
	.mebs{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99999;
		img{
			width:82px;
			height:120px;
			position: absolute;
			right:0;
		}
		.dian{
			color:#FFF;
			font-size: 16px;
			position: absolute;
			right:90px;
			top:100px;
		}
		div{
			width:80px;
			height:30px;
			border-radius: 5px;
			border:1px solid #FFF;
			position: absolute;
			left: 50%;
			top:90%;
			transform: translate(-50%,-90%);
			display: flex;
			justify-content: center;
			align-content: center;
			span{
				display: inline;
				text-align: center;
				line-height: 30px;
				color: #FFF;
				font-size: 16px;
			}
		}
	}
  .note{
		padding: 38px 15px 15px 15px;
		box-sizing: border-box;
		width:100%;
		height:502.5px;
	}
	.list{
		width:100%;
		padding: 0 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		margin-top:-410px;
		z-index: 99;
		.box{
			width:100%;
			min-height: 574px;
			background: #FFF;
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			box-shadow: 0px 6px 10px 2px #f1f1f1;
			.pic{
				width:60px;
				height:60px;
				overflow: hidden;
				border-radius: 50%;
				position: absolute;
				left:50%;
				top:-25px;
				transform: translate(-50%);
				img{
					width:100%;
					height:100%;
				}
			}
			.info{
				width:100%;
				height:283px;
				background: url("~@as/img/shengri_enen@2x.png") center center
				no-repeat;
				background-size: 100% 100%;
				.step1{
					width:100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-top: 45px;
					span{
						font-size: 18px;
						color: #333;
						font-weight: bold;
					}
					p{
						font-size: 12px;
						color: #999;
					}
				}
				.step2{
					width:100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-top: 20px;
					span{
						font-size: 14px;
						color:#eb4d44;
						font-weight: bold;
					}
				}
				.step3{
					width:100%;
					height:40px;
					background: #eb4d44;
					border-radius: 5px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 90px;
					span{
						color: #FFF;
						font-size: 14px;
					}
				}
			}
			.blessing{
				width:100%;
				padding: 15px 0;
				margin-top: 60px;
				display: flex;
				flex-direction: column;
				.title{
					width:100%;
					padding: 0 15px;
					display: flex;
					justify-content: space-between;
					align-items:center;
					margin-bottom: 15px;
					.tix{
						display: flex;
						align-items: center;
						span{
							font-size: 22px;
							color: #000;
							font-weight: bold;
						}
						.num{
							font-size: 12px;
							color:#999;
							font-weight: normal;
							margin-left: 5px;
						}
					}
					.xian{
						width:60%;
						height:1px;
						background: #ddd;
					}
				}
				.bar{
					width:100%;
					padding: 15px 15px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					.col1{
						width:100%;
						display: flex;
						align-items: center;
						.tx{
							width:40px;
							height:40px;
							overflow: hidden;
							border-radius: 50%;
							img{
								width:100%;
								height:100%;
							}
						}
						.xx{
							display: flex;
							flex-direction: column;
							margin-left: 8px;
							span{
								color: #333;
								font-size: 14px;
							}
							p{
								font-size: 12px;
								color: #999;
							}
						}
					}
					.col2{
						width:100%;
						margin-top: 15px;
						p{
							font-size: 12px;
							line-height: 1.8;
							color: #333;
						}
					}
					.col3{
						width:100%;
						height:169px;
						border-radius: 5px;
						background: url("~@as/img/shengri_huahua@2x.png") center center
						no-repeat;
						background-size: 100% 100%;
						margin-top: 15px;
						position: relative;
						.bq{
							width:81px;
							height:28.5px;
							background:-webkit-linear-gradient(left,#eb4e44,#f47447);
							background:-o-linear-gradient(right,#eb4e44,#f47447);
							background:-moz-linear-gradient(right,#eb4e44,#f47447);
							background:linear-gradient(to right,#eb4e44,#f47447);
							position: absolute;
							left:0;
							bottom: 0;
							border-bottom-left-radius:5px;
							border-top-right-radius:15px;
							display: flex;
							justify-content: center;
							align-items: center;
							span{
								font-size: 12px;
								color: #FFF;
							}
						}
					}
					.col4{
						width:100%;
						margin-top: 15px;
						display: flex;
						justify-content: flex-end;
						span{
							font-size: 12px;
							color: #999;
						}
					}
				}
			}
		}
	}
	
</style>